<template>
  <el-form ref="form" :model="form" :show-message="false" label-width="100px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="姓名" prop="userName" required>
          <el-input v-model="form.userName" placeholder="请输入姓名" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别" required>
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option
              v-for="dict in dict.type.sys_user_sex"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="手机号码" prop="mobile" required>
          <el-input
            v-model="form.mobile"
            placeholder="请输入手机号码"
            :disabled="!!form.id && form.dataStatus === 1"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属单位" prop="comId" :required="userType !== 2">
          <SelectCompany
            :defaultValue="form.comId"
            :companyType="0"
            @change="(e) => (form.comId = e)"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="身份证号码" prop="idcardno">
          <el-input v-model="form.idcardno" placeholder="请输入身份证号码" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属部门" prop="deptId">
          <SelectDept
            :defaultValue="form.deptId"
            :comId="form.comId"
            :disabled="!form.comId"
            @change="(e) => (form.deptId = e)"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col v-if="userType === 2" :span="12">
        <el-form-item label="专家称号" prop="expertTitle">
          <el-select
          v-model="form.expertTitle"
          placeholder="请选择专家称号"
          clearable
        >
          <el-option
            v-for="dict in dict.type.sys_expert_title"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          >
          </el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="专家职称" prop="postId" :required="userType !== 2">
          <el-select v-model="form.postId" placeholder="请选择专家职称">
            <el-option
              v-for="item in postOptions"
              :key="item.postId"
              :label="item.postName"
              :value="item.postId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col v-if="userType !== 2" :span="12">
        <el-form-item label="入行时间" prop="entryTime">
          <el-date-picker
            v-model="form.entryTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="头像">
          <ImageUpload v-model="form.headimg" :width="100" :height="100" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="专家签名">
          <ImageUpload v-model="form.prescriptionSign" :width="400" :height="200" cropper />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="userType !== 2">
      <el-col :span="12">
        <el-form-item label="身份证正面">
          <ImageUpload v-model="form.idcard1" :width="100" :height="62" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证背面">
          <ImageUpload v-model="form.idcard2" :width="100" :height="62" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col v-if="userType === 2" :span="12">
        <el-form-item label="专家介绍图">
          <ImageUpload v-model="form.introduceImg" :fileSize="10" />
        </el-form-item>
      </el-col>
      <template v-else>
        <el-col :span="12">
          <el-form-item label="工作证">
            <ImageUpload v-model="form.workPermit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资格证书">
            <ImageUpload v-model="form.qualificationCertificate" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中医医师执业证书">
            <ImageUpload v-model="form.chineseMedicineQualification" />
          </el-form-item>
        </el-col>
      </template>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="擅长" prop="speciality">
          <el-input
            v-model="form.speciality"
            type="textarea"
            :rows="3"
            placeholder="请输入擅长症状，不同症状用逗号分隔。"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="个人简介" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入个人简介"
          />
        </el-form-item>
      </el-col>
      <el-col v-if="userType === 2" :span="24">
        <el-form-item label="专家名言" prop="famousSay">
          <el-input
            v-model="form.famousSay"
            :maxLength="20"
            placeholder="请输入专家名言,限制20字以内"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="账号状态" prop="disabled">
          <el-switch v-model="form.disabled" :active-value="0" :inactive-value="1" active-text="启用" inactive-text="禁用">
          </el-switch>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import SelectCompany from "@/components/SelectCompany";
import SelectDept from "@/components/SelectDept";
import { optionselect } from "@/api/expert/post";
import ImageUpload from "@/components/ImageUpload";
import { getCompany } from "@/api/company/company";
import { getDept } from "@/api/system/dept";

export default {
  dicts: ["sys_user_sex", "sys_expert_title"],
  components: {
    SelectCompany,
    SelectDept,
    ImageUpload,
  },
  props: {
    // 专家类型, 平台专家: 2
    userType: {
      type: Number
    }
  },
  data() {
    return {
      // 岗位选项
      postOptions: [],

      // 表单参数
      form: {
        id: null,
        userName: null,
        mobile: null,
        sex: null,
        headimg: null,
        comId: null,
        deptId: null,
        idcard1: null,
        idcard2: null,
        speciality: null,
        postId: null,
        postName: null,
        remark: null,
        entryTime: null,
        idcardno: null,
        qualificationCertificate: null,
        chineseMedicineQualification: null,
        workPermit: null,

        userType: undefined, // 专家类型, 平台专家: 2
        expertTitle: undefined, // 专家称号
        introduceImg: undefined, // 专家介绍图
        famousSay: undefined, // 专家名言
        disabled: 0, // 是否禁用: 0启用 1禁用
      },
    };
  },
  created() {
    this.getOptionselect();
  },
  methods: {
    getOptionselect() {
      optionselect({ pageNum: 1, pageSize: 999 }).then((response) => {
        this.postOptions = response.data;
      });
    },
    setForm(data) {
      const that = this;
      that.form = {};
      Object.assign(that.$data.form, that.$options.data().form);
      that.resetForm("form");
      if (data) {
        that.form = data;
      }
    },
    validateForm() {
      const that = this;
      return new Promise((resolve, reject) => {
        that.$refs["form"].validate(async (valid) => {
          if (valid) {
            if(that.form.comId){
              const currentCom = await getCompany(that.form.comId);
              that.form.com = currentCom.data.cname;
            }
            if (that.form.deptId) {
              const currentDept = await getDept(that.form.deptId);
              that.form.deptname = currentDept.data.deptName;
              that.form.saasDeptId = currentDept.data.saasId;
            }else{
              that.form.deptname = "";
            }
            if(that.form.postId){
              that.form.postName = that.postOptions.find(
                (item) => item.postId == that.form.postId
              ).postName;
            }
            that.form.userType = that.userType;
            resolve(that.form);
          } else {
            reject("请填写表单必填项");
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
